<template>
  <div class="app-container home">
    <!-- <el-row>
      <el-col :span="8" class="top_list">
        <div style="background:#40a9ff;padding:30px 0" @click="getChartFn(1)">
          <div class="top_text">猪场数</div>
          <div class="line"></div>
          <div class="top_num">{{topData.pigfarmInfo}}</div>
        </div>
      </el-col>
      <el-col :span="8" class="top_list">
        <div style="background:#73d13d;padding:30px 0" @click="getChartFn(2)">
          <div class="top_text">项目数</div>
          <div class="line"></div>
          <div class="top_num">{{topData.pigfarmProject}}</div>
        </div>

      </el-col>
      <el-col :span="8" class="top_list">
        <div style="background:#36cfc9;padding:30px 0" @click="getChartFn(3)">
          <div class="top_text">资金</div>
          <div class="line"></div>
          <div class="top_num">{{topData.payApply}}</div>
        </div>
      </el-col>
    </el-row>
    <div id="ascaleChart_fir" style="height: 550px;margin-top:30px"></div> -->


    <el-row>
      <el-col :span="24">
        <div class="indexCard">
          <div class="indexContent2">
            <el-tabs v-model="activeName" @tab-click="handleClick">

              <el-tab-pane label="我的派发" name="我的派发">
                <div slot="label"><i class="el-icon-s-promotion"></i>我的派发</div>
                <div class="search-box" ref="queryForm">
                  <el-form :inline="true" :model="search" class="demo-form-inline">
                    <el-form-item label="项目名称">
                      <el-input v-model="search.projectName" size="small" clearable placeholder="请输入项目名称"></el-input>
                    </el-form-item>
                    <el-form-item label="创建日期">
                      <el-date-picker v-model="search.date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" size="small" clearable type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="状态">
                     <el-select v-model="search.status" size="small" clearable>
                       <el-option label="待办" :value="0"></el-option>
                       <el-option label="已撤销" :value="1"></el-option>
                       <el-option label="已完成" :value="2"></el-option>
                     </el-select>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" size="small" @click="handleSearch(1)">查询</el-button>
                    </el-form-item>
                  </el-form>
                </div>

                <el-table class="indexTable" :data="taskList" row-key="id" border height="500" ref="indexTable">
                  <el-table-column type="index" label="序号" align="center"></el-table-column>
                  <el-table-column prop="taskName" label="任务类型" align="center" show-overflow-tooltip></el-table-column>
                  <el-table-column prop="projectName" label="所属项目" align="center" show-overflow-tooltip></el-table-column>
                  <el-table-column prop="taskDesc" label="任务详情" align="center" show-overflow-tooltip width="400"></el-table-column>
                  <el-table-column prop="createTime" label="创建日期" align="center" show-overflow-tooltip></el-table-column>
                  <el-table-column prop="dealName" label="处理人" align="center" show-overflow-tooltip></el-table-column>
                  <el-table-column prop="status" label="状态" align="center" show-overflow-tooltip>
                    <template slot-scope="scope">
                      <span v-if="scope.row.status==0">待办</span>
                      <span v-else-if="scope.row.status==1">已撤销</span>
                      <span v-else>已完成</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" align="center" width="100">
                    <template slot-scope="scope">
                      <el-button type="primary" size="mini" @click="handleReminderClick(scope.row)" v-if="scope.row.status=='0'">催办</el-button>
                    </template>
                  </el-table-column>
                </el-table>

                <div style="margin-top: 30px;display: flex;justify-content: flex-end;align-items: center;">
                  <el-pagination @current-change="(val) => handleCurrentChange(val,1)" background :current-page.sync="page.pageNum" :page-size="page.pageSize" layout="prev, pager, next, jumper" :total="page.total"></el-pagination>
                </div>
              </el-tab-pane>






              <el-tab-pane label="我的待办" name="我的待办">
                <div slot="label"><i class="el-icon-s-check"></i>我的待办</div>
                <div class="search-box" ref="queryForm">
                  <el-form :inline="true" :model="search2" class="demo-form-inline">
                    <el-form-item label="项目名称">
                      <el-input v-model="search2.projectName" size="small" clearable placeholder="请输入项目名称"></el-input>
                    </el-form-item>
                    <el-form-item label="创建日期">
                      <el-date-picker v-model="search2.date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" size="small" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" size="small" @click="handleSearch(2)">查询</el-button>
                    </el-form-item>
                  </el-form>
                </div>

                <el-table class="indexTable" :data="taskList2" row-key="id" border height="500" ref="indexTable2">
                  <el-table-column type="index" label="序号" align="center"></el-table-column>
                  <el-table-column prop="taskName" label="任务类型" align="center" show-overflow-tooltip></el-table-column>
                  <el-table-column prop="projectName" label="所属项目" align="center" show-overflow-tooltip></el-table-column>
                  <el-table-column prop="taskDesc" label="任务详情" align="center" show-overflow-tooltip width="400"></el-table-column>
                  <el-table-column prop="createTime" label="创建日期" align="center" show-overflow-tooltip></el-table-column>
                  <el-table-column prop="createName" label="创建人" align="center" show-overflow-tooltip></el-table-column>
                  <el-table-column label="操作" align="center" width="100">
                    <template slot-scope="scope">
                      <el-button type="primary" size="mini" @click="handleDealClick(scope.row)">处理</el-button>
                    </template>
                  </el-table-column>
                </el-table>

                <div style="margin-top: 30px;display: flex;justify-content: flex-end;align-items: center;">
                  <el-pagination @current-change="(val) => handleCurrentChange(val,1)" background :current-page.sync="page2.pageNum" :page-size="page2.pageSize" layout="prev, pager, next, jumper" :total="page2.total"></el-pagination>
                </div>

              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </el-col>
    </el-row>


  </div>
</template>

<script>
import echarts from 'echarts'
import { getTopData, getChartsData, getTableListApi, setTodoApi } from "@/api/index";

export default {
  name: "index",
  data() {
    return {
      // 版本号
      version: "1.0.0",
      chart1: {},//计量器图-发展
      ascaleChart_firOption:{
        title: {
          text: "猪场数",
          textAlign: 'top',
          // subtext:'猪场数',
          subtextStyle:{
            color:'rgb(100 104 97)',
            lineHeight:20,
          }
          // padding: 5
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        color: [],
        legend: {
          data: []
          // orient: 'horizontal',
          // x: 'center',
          // right: "20",
          // data: [],
          // formatter: function (name) {
          //   console.log("name:", name);
          //   return name;
          // }
        },
        grid: { // 偏移
          left: '3%',
          right: '4%',
          bottom: '3%',
          top:'90',
          containLabel: true,
          show: true,
          backgroundColor: '#f0f0f0',
        },
        label:{
          color:'#323232',
        },
        xAxis: {
          type: 'category',
          splitLine: {
            show: false,
          },
          data: []
        },
        yAxis:
        [{
          type: 'value',
          axisLabel: {

            formatter: function (val) {
              if (val > 10000) {
                return `${(val / 10000).toFixed(1)}(w)`
              } else {
                return val
              }
            }
          }
        }],
        series: []
      },
      topData:{

      },


      activeName:"我的待办",//tab索引
      search:{ createBy:"", projectName:"", date:"", startTime:"", endTime:"", status:0},//搜索条件--我的派送
      search2:{ dealBy:"",projectName:"", date:"",startTime:"", endTime:"", status:0},//搜索条件--我的待办
      taskList:[],//表格数据--我的派送
      taskList2:[],//表格数据--我的待办
      page:{pageNum:1, pageSize:10, total:0},//分页--我的派送
      page2:{pageNum:1, pageSize:10, total:0},//分页--我的待办

    };
  },
  watch:{
    ascaleChart_firOption: {
      handler(newVal, oldVal) {
        if (this.chart1) {
          if (newVal) {
            this.chart1.setOption(newVal, true);
          } else {
            this.chart1.setOption(oldVal, true);
          }
        } else {
          //this.getTopData();
        }
      },
      deep: true
    },
  },
  created(){
    // this.getData();
    // this.getChartFn('1')
    const account = localStorage.getItem("account");
    this.search.createBy = account;
    this.search2.dealBy = account;
    this.getTableList2();
  },


  mounted() {
    // this.ascaleChart_fir('ascaleChart_fir');
  },


  methods: {

    /**
     *tab 点击事件
     * @param tab
     * @param event
     */
    handleClick(tab, event){
      console.log(this.activeName);
      if(this.activeName==="我的待办"){
        this.getTableList2();
      }else{
        this.getTableList();
      }
    },

    /**
     * 获取表格数据--我的派发
     */
    getTableList(){
      const loading = this.$loading({lock: true, text: 'Loading', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)'});
      //delete this.search.date;
      getTableListApi(this.search,this.page).then(res => {
        console.log('列表:',res);
        loading.close();
        if(res.code === 0){
          const { records, total } = res.data;
          this.taskList = records;
          this.page.total = total;
          this.$nextTick(()=> {
            console.log("date:",this.search.date);
          })
        }else{
          this.$message.warning(res.msg)
        }
      }).catch(error => {
        loading.close();
        console.log('error:',error);
      })
    },

    /**
     * 获取表格数据--我的待办
     */
    getTableList2(){
      const loading = this.$loading({lock: true, text: 'Loading', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)'});
      getTableListApi(this.search2,this.page2).then(res => {
        console.log('列表:',res);
        loading.close();
        if(res.code === 0){
          const { records, total } = res.data;
          this.taskList2 = records;
          this.page2.total = total;
          //debugger
          console.log("search:",this.search);
        }else{
          this.$message.warning(res.msg)
        }
      }).catch(error => {
        loading.close();
        console.log('error:',error);
      })
    },

    /**
     * 查询按钮点击事件
     */
    handleSearch(type){
      //debugger
      if(type===1){
        console.log(this.search);
        if(this.search.date){
          this.search.startTime = this.search.date[0];
          this.search.endTime = this.search.date[1];
        }
        this.getTableList();
      }else{
        console.log(this.search2);
        if(this.search2.date){
          this.search2.startTime = this.search2.date[0];
          this.search2.endTime = this.search2.date[1];
        }
        this.getTableList2();
      }
    },


    /**
     * 我的派发--催办
     */
    handleReminderClick(data){
      const { id } = data;
      const loading = this.$loading({lock: true, text: 'Loading', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)'});
      setTodoApi(id).then(res => {
        loading.close();
        if(res.code ===0){
          this.$message.success("催办成功");
        }else{
          this.$message.warning(res.msg);
        }
      }).catch(error => {
        console.log(error);
        loading.close();
      })
    },

    /**
     * 我的待办--处理
     */
    handleDealClick(data){
      const { projectId, url } = data;
      console.log("url:",url);
      this.$router.push({
        path: url,
      /*  query: {
          type:'details',
          id:projectId,
        }*/
      });
    },


    /**
     *分页点击事件
     * @param val 当前页
     * @param type 1我的派送 2我的待办
     */
    handleCurrentChange(val,type){
      if(type===1){
        this.page.pageNum = val;
        this.getTableList();
      }else{
        this.page2.pageNum = val;
        this.getTableList2();
      }
    },









    getChartFn(e){
      getChartsData(e).then(response => {
        // response.data
        if (e == '1') {
          this.ascaleChart_firOption.title.text = '猪场数'
        }
        if (e == '2') {
          this.ascaleChart_firOption.title.text = '项目数'
        }
        if (e == '3') {
          this.ascaleChart_firOption.title.text = '资金'
        }

        this.ascaleChart_firOption.xAxis.data = response.data.xData
        // this.ascaleChart_firOption.legend.data = response.data.xData


        var arr = []
        var arrLegend = []
        for (let index = 0; index < response.data.yData.length; index++) {
          const element = response.data.yData[index];

          arr.push({
            name: response.data.yData[index].name,
            type: 'bar',
            showBackground: true,
            data: response.data.yData[index].data,
            markPoint: {
                data: [
                    {type: 'max', name: '最大值'},
                    {type: 'min', name: '最小值'}
                ]
            },
            markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ]
            }
          })
          arrLegend.push(response.data.yData[index].name)
        }
        this.ascaleChart_firOption.series = arr
        this.ascaleChart_firOption.legend.data = arrLegend

        this.ascaleChart_firOption.color[0] = '#5470c6'
        this.ascaleChart_firOption.color[1] = '#91cc75'

        console.log(this.ascaleChart_firOption)
      });
    },
    getData(){
      getTopData().then(response => {
        this.topData = response.data
      });
    },
    ascaleChart_fir(id) {
      this.chart1 = echarts.init(document.getElementById(id));
      this.chart1.setOption(this.ascaleChart_firOption, true);
    },
    goTarget(href) {
      window.open(href, "_blank");
    },



  },
};
</script>

<style scoped lang="scss">

.top_list{
  padding:20px;
  text-align: center;
  cursor: pointer;
  .line{
    height: 1px ;
    width: 100px;
    background: #fff;
    margin: 10px auto;
    transition: width .2s;
  }
  &:hover {
    .line{
      width: 100%;
    }

  }
}
.top_text{
  letter-spacing: 2px;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
}

.top_num{
  // padding-top: 10px;
  font-size: 34px;
  color: #fff;
}
.home {
  width: 100%;
  height: 100%;
  background-color: #F5F5F5;
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}

.indexCard{
  border-radius: 20px;
  background-color: #ffffff;
  padding: 20px 40px;
  display: flex;
  flex-direction: column;
  .indexContent1{
    padding: 20px 0 0 0;
  }
  .indexContent2{
    padding: 20px 0 0 0;
  }
  .search-box{
    margin-top: 30px;
  }
}
</style>

